<template>
<a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
        <!-- <span style="color:#fff;font-size:20px;font-weight:bold">大机运用管理平台</span> -->
        <img src="@/assets/logo.png" class="logo" alt="">
        <a-popover trigger="hover">
            <template slot="content">
                <p @click="personInfo()"><a-icon type="user"/> 个人中心</p>
                <p @click="setPassword()"><a-icon type="lock" /> 密码设置</p>
                <p @click="logout()"><a-icon type="poweroff"/> 安全退出</p>
            </template>
            <div class="layoutHeader">
                <img src="../assets/manager.png" alt="">
                <span>{{name}}</span>
                <a-icon type="logout" />
            </div>
        </a-popover>
    </a-layout-header>
    <a-layout>
        <a-layout-sider width="250" style="background: #fff">
            <a-menu
                :selectedKeys="selectedKeys"
                :open-keys="openKeys"
                mode="inline"
                @click="changeMenu"
                theme="dark"
                @openChange="onOpenChange"
                >
                <a-sub-menu key="sub1" v-if="role=='超级管理员'||routeAuth.indexOf('4')!=-1">
                    <span slot="title"><a-icon type="team" /><span>用户管理</span></span>
                    <a-menu-item key="1">
                        机构用户
                    </a-menu-item>
                    <a-menu-item key="4">
                        个人用户
                    </a-menu-item>
                    <a-menu-item key="7"  v-if="role=='超级管理员'">
                        子管理员
                    </a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub4" v-if="role=='超级管理员'||routeAuth.indexOf('1')!=-1">
                    <span slot="title"><a-icon type="file-excel" /><span>1+X管理</span></span>
                    <a-menu-item key="8">
                        考务管理
                    </a-menu-item>
                    <a-menu-item key="9">
                        站点管理
                    </a-menu-item>
                    <a-menu-item key="10">
                        专家库
                    </a-menu-item>
                    <a-menu-item key="11">
                        培训管理
                    </a-menu-item>
                    <a-menu-item key="12">
                        数据统计
                    </a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub6" v-if="role=='超级管理员'||routeAuth.indexOf('2')!=-1">
                    <span slot="title"><a-icon type="laptop" /><span>教学课堂管理</span></span>
                    <a-menu-item key="18">
                        课程管理
                    </a-menu-item>
                    <a-menu-item key="19">
                        人才方案管理
                    </a-menu-item>
                    <a-sub-menu key="sub7">
                        <span slot="title"><a-icon type="read" /><span>题库管理</span></span>
                        <a-menu-item key="20">
                            题库
                        </a-menu-item>
                        <a-menu-item key="21">
                            我的测试
                        </a-menu-item>
                        <a-menu-item key="22">
                            我的考试
                        </a-menu-item>
                    </a-sub-menu>
                    <a-sub-menu key="sub8">
                        <span slot="title"><a-icon type="diff"/><span>问答管理</span></span>
                        <a-menu-item key="23">
                            问题管理
                        </a-menu-item>
                        <a-menu-item key="32">
                            回答管理
                        </a-menu-item>
                    </a-sub-menu>
                    <a-menu-item key="24">
                        课程统计
                    </a-menu-item>
                    <a-menu-item key="25">
                        成绩与证书
                    </a-menu-item>
                    <a-menu-item key="26">
                        培训管理
                    </a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub5" v-if="role=='超级管理员'||routeAuth.indexOf('3')!=-1">
                    <span slot="title"><a-icon type="notification" /><span>信息发布管理</span></span>
                    <a-menu-item key="14">
                    资讯中心
                    </a-menu-item>
                    <a-menu-item key="15">
                    实训中心
                    </a-menu-item>
                    <a-sub-menu key="sub8">
                        <span slot="title"><span>产教融合</span></span>
                        <a-menu-item key="27">
                            联盟介绍
                        </a-menu-item>
                        <a-menu-item key="28">
                            联盟单位
                        </a-menu-item>
                        <a-menu-item key="29">
                            产教合作
                        </a-menu-item>
                        <a-menu-item key="30">
                            人才需求
                        </a-menu-item>
                        <a-menu-item key="31">
                            质量评价
                        </a-menu-item>
                    </a-sub-menu>
                    <a-menu-item key="17">
                    名师讲堂
                    </a-menu-item>
                    <a-menu-item key="33">
                    banner图管理
                    </a-menu-item>
                    <!-- <a-menu-item key="34">
                    适用产品管理
                    </a-menu-item>
                    <a-menu-item key="35">
                    授权码申请管理
                    </a-menu-item> -->
                </a-sub-menu>
                <!-- <a-menu-item key="33">
                    <a-icon type="picture" />
                    banner图管理
                </a-menu-item> -->
            </a-menu>
        </a-layout-sider>
            <a-layout style="padding: 0 24px 24px">
                <router-view></router-view>
            </a-layout>
        </a-layout>
        <!-- 个人信息 -->
         <a-modal
            title="个人信息"
            :visible="infoBox"
            @cancel="infoBox=false"
            :footer="null"
            :destroyOnClose="true"
            class="personal"
            >
            <div class="detail">
                <div class="left">
                    <p>用户名：{{info.name}}</p>
                    <p>账号：{{info.account}}</p>
                </div>
                <img class="right" :src="info.icon" alt="">
            </div>
        </a-modal>
        <!-- 密码设置弹框 -->
        <editPassword
            :passwordBox="passwordBox"
            @cancel="passwordBox=false"
            @submitPassword="submitPassword"
        ></editPassword>
    </a-layout>
</template>
<script>
import {getUserInfoApi,submitPasswordApi} from "@/request/api"
import editPassword from "@/components/common/editPassword"
export default {
    name:'layout',
    components:{editPassword},
    created(){
        this.routeAuth=localStorage.getItem('routeAuth')
        this.role=localStorage.getItem('role')
        this.name=localStorage.getItem('name')
    },
    mounted(){
        let arr=window.location.pathname.split('/')
        switch(arr[arr.length-1]){
            case 'teacherLecture' : this.openKeys=['sub5'];this.selectedKeys=['17'];
            break;
            case 'teacherLectureAdd' : this.openKeys=['sub5'];this.selectedKeys=['17'];
            break;
            case 'training' : this.openKeys=['sub5'];this.selectedKeys=['15'];
            break;
            case 'trainingAdd' : this.openKeys=['sub5'];this.selectedKeys=['15'];
            break;
            case 'news' : this.openKeys=['sub5'];this.selectedKeys=['14'];
            break;
            case 'newsAdd' : this.openKeys=['sub5'];this.selectedKeys=['14'];
            break;
            case 'allianceIntroduction' : this.openKeys=['sub5','sub8'];this.selectedKeys=['27'];
            break;
            case 'allianceUnit' : this.openKeys=['sub5','sub8'];this.selectedKeys=['28'];
            break;
            case 'allianceCooperation' : this.openKeys=['sub5','sub8'];this.selectedKeys=['29'];
            break;
            case 'allianceCooperationAdd' : this.openKeys=['sub5','sub8'];this.selectedKeys=['29'];
            break;
            case 'job' : this.openKeys=['sub5','sub8'];this.selectedKeys=['30'];
            break;
            case 'jobAdd' : this.openKeys=['sub5','sub8'];this.selectedKeys=['30'];
            break;
            case 'assessment' : this.openKeys=['sub5','sub8'];this.selectedKeys=['31'];
            break;
            case 'questionBank' : this.openKeys=['sub6','sub7'];this.selectedKeys=['20'];
            break;
            case 'questionAdd' : this.openKeys=['sub6','sub7'];this.selectedKeys=['20'];
            break;
            // case 'questionAction' : this.openKeys=['sub6','sub7'];this.selectedKeys=['20'];
            // break;
            case 'course' : this.openKeys=['sub6'];this.selectedKeys=['18'];
            break;
            case 'courseDetail' : this.openKeys=['sub6'];this.selectedKeys=['18'];
            break;
            case 'courseAdd' : this.openKeys=['sub6'];this.selectedKeys=['18'];
            break;
            case 'mytest' : this.openKeys=['sub6','sub7'];this.selectedKeys=['21'];
            break;
            case 'myTestEdit' : this.openKeys=['sub6','sub7'];this.selectedKeys=['21'];
            break;
            case 'myExam' : this.openKeys=['sub6','sub7'];this.selectedKeys=['22'];
            break;
            case 'trainingProgram' : this.openKeys=['sub6'];this.selectedKeys=['19'];
            break;
            case 'trainingProgramAdd' : this.openKeys=['sub6'];this.selectedKeys=['19'];
            break;
            case 'ask' : this.openKeys=['sub6','sub8'];this.selectedKeys=['23'];
            break;
            case 'reply' : this.openKeys=['sub6','sub8'];this.selectedKeys=['32'];
            break;
            case 'achieveAndCert' : this.openKeys=['sub6'];this.selectedKeys=['25'];
            break;
            case 'achievementDetail' : this.openKeys=['sub6'];this.selectedKeys=['25'];
            break;
            case 'trainingManager' : this.openKeys=['sub6'];this.selectedKeys=['26'];
            break;
            case 'trainingManagerAdd' : this.openKeys=['sub6'];this.selectedKeys=['26'];
            break;
            case 'trainingApply' : this.openKeys=['sub6'];this.selectedKeys=['26'];
            break;
            case 'trainingRecord' : this.openKeys=['sub6'];this.selectedKeys=['26'];
            break;
            case 'courseStatic' : this.openKeys=['sub6'];this.selectedKeys=['24'];
            break;
            case 'courseStaticDetail' : this.openKeys=['sub6'];this.selectedKeys=['24'];
            break;
            case 'users' : this.openKeys=['sub1'];this.selectedKeys=['4'];
            break;
            case 'examineeManage' : this.openKeys=['sub4'];this.selectedKeys=['8'];
            break;
            case 'examinationAdd' : this.openKeys=['sub4'];this.selectedKeys=['8'];
            break;
            case 'viewSign' : this.openKeys=['sub4'];this.selectedKeys=['8'];
            break;
            case 'examineeRecord' : this.openKeys=['sub4'];this.selectedKeys=['8'];
            break;
            case 'onePlusTrainingManage' : this.openKeys=['sub4'];this.selectedKeys=['11'];
            break;
            case 'onePlusTrainingAdd' : this.openKeys=['sub4'];this.selectedKeys=['11'];
            break;
            case 'viewOnePlusSign' : this.openKeys=['sub4'];this.selectedKeys=['11'];
            break;
            case 'siteManage' : this.openKeys=['sub4'];this.selectedKeys=['9'];
            break;
            case 'siteDetail' : this.openKeys=['sub4'];this.selectedKeys=['9'];
            break;
            case 'expert' : this.openKeys=['sub4'];this.selectedKeys=['10'];
            break;
            case 'expertDetail' : this.openKeys=['sub4'];this.selectedKeys=['10'];
            break;
            case 'dataAnalysis' : this.openKeys=['sub4'];this.selectedKeys=['12'];
            break;
            case 'banner' :this.openKeys=['sub4'];this.selectedKeys=['33'];
            break;
            case 'userSchool' :this.openKeys=['sub1'];this.selectedKeys=['1'];
            break;
            case 'userAdmin' :this.openKeys=['sub1'];this.selectedKeys=['7'];
            break;
        }
    },
    data(){
        return{
            openKeys:['sub1'],
            selectedKeys:['1'],
            rootSubmenuKeys:['sub1','sub4','sub6','sub5'],
            infoBox:false,
            info:{},
            passwordBox:false,
            routeAuth:[],
            role:''
        }
    },
    methods:{
        personInfo(){
            this.infoBox=true
            this.getToken(getUserInfoApi,{},res=>{
                this.info=res.data
            })
        },
        setPassword(){
            this.passwordBox=true
        },
        submitPassword(data){
            this.getToken(submitPasswordApi,data,res=>{
                this.$message.success(res.message)
                this.passwordBox=false
            })
        },
        onOpenChange(openKeys) {
            const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                this.openKeys = openKeys;
            } else {
                this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            }
        },
        logout(){
            this.$confirm({
                title:'确认退出吗?',
                okText:'确认',
                cancelText:'取消',
                onOk:()=>{
                    this.$router.push({path:'/'})
                },
                onCancel() {},
            })
        },
        changeMenu({key}){
            this.selectedKeys=[key]
            let path=""
            switch(key){
                case '17' : path='/teacherLecture'
                break;
                case '15' : path='/training'
                break;
                case '14' : path='/news'
                break;
                case '27' : path='/allianceIntroduction'
                break;
                case '28' : path='/allianceUnit'
                break;
                case '29' : path='/allianceCooperation'
                break;
                case '30' : path='/job'
                break;
                case '31' : path='/assessment'
                break;
                case '20' : path='/questionBank'
                break;
                case '18' : path='/course'
                break;
                case '21' : path='/mytest'
                break;
                case '22' : path='/myExam'
                break;
                case '19' : path='/trainingProgram'
                break;
                case '23' : path='/ask'
                break;
                case '32' : path='/reply'
                break;
                case '25' : path='/achieveAndCert'
                break;
                case '26' : path='/trainingManager'
                break;
                case '24' : path='/courseStatic'
                break;
                case '4' : path='/users'
                break;
                case '8' : path='/examineeManage'
                break;
                case '11' : path='/onePlusTrainingManage'
                break;
                case '9' : path='/siteManage'
                break;
                case '10' : path='/expert'
                break;
                case '12' : path='/dataAnalysis'
                break;
                case '33' : path='/banner'
                break;
                case '1' : path='/userSchool'
                break;
                case '7' : path='/userAdmin'
                break;
            }
            this.$router.push({path:path})
        }
    }
}
</script>
<style>
    .ant-layout{
        height:100%
    }
    #components-layout-demo-top-side-2 .logo {
        height: 40px;
        float: left;
        margin-top:15px;
    }
    .ant-menu-inline{
        min-height:100%;
    }
    .ant-layout-header{
        padding:0 20px;
    }
    .popoverBox p{
        color:#1890ff;
        cursor:pointer;
    }
        
    
</style>
<style lang="stylus" scoped>
.ant-layout-header.header
    display:flex;
    justify-content: space-between;
.layoutHeader
    color:#fff;
    cursor pointer
    img
        margin-right:10px;
    span
        margin-right:10px;
.ant-popover-placement-bottom
    margin-top:-20px !important;
    .ant-popover-inner 
        p
            cursor:pointer;
            &:hover
                color:#1890ff;
            &:last-child
                margin:0;
.personal
    .detail
        padding:0 40px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        img     
            width:100px;
            height:100px;


</style>>